<template>
  <view class="course-container" @click="toDetail">
    <image class="cover" :src="product.coverUrl256" mode="aspectFill"></image>
    <view class="info">
      <view class="title">{{ product.title }}</view>
      <view class="f1"></view>
      <view class="footer">
        <view class="valid">￥{{ product.priceStr }}</view>
        <view class="f1"></view>
        <view class="start-btn">{{ mode === 1 ? '购买' : '挂载该课' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['mode', 'product'],
  name: "ProductListItem",
  methods: {
    toDetail() {
      if (this.mode === 1) {
        uni.navigateTo({
          url: '/pages/product_detail/product_detail?course_id=' + this.product.id
        });
      } else {
        this.$emit('toDetail', this.product.id)
      }
    }
  }
}
</script>

<style lang="scss">
.course-container {
  background-color: #fff;
  height: 180rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;

  .cover {
    margin-right: 20rpx;
    width: 232rpx;
    height: 180rpx;
    background-color: #ccc;
    border-radius: 16rpx;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      color: #121212;
      font-size: 15px;
      font-weight: bold;
    }

    .footer {
      display: flex;
      align-items: center;

      .valid {
        color: #FD2242;
        font-size: 16px;
        font-weight: bold;
      }

      .start-btn {
        background-color: #3073F6;
        height: 60rpx;
        width: 166rpx;
        border-radius: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 13px;
      }
    }
  }
}
</style>
